<template>
	<div style="width: 90%; margin: 0 auto;">

		<div class="find">

			<div style="display: flex;margin: 0 auto;width: 50%;"><el-input v-model="bookname">
				</el-input>
				<el-button @click="findbookname()">搜索</el-button>
			</div>

			<el-button @click="gocar()">我的购物车</el-button>
		</div>
		<div style="width: 60%; margin: 0 auto; margin-top: 2%; border: 1px solid orange;"></div>
		<div class="sb">
			<div>
				<el-col>
					<el-menu default-active="2" @open="handleOpen" @close="handleClose" v-for="item in list2">
						<el-menu-item>
							<span slot="title" @click="go(item)">{{item.name}}</span>
						</el-menu-item>
					</el-menu>
				</el-col>
			</div>
		</div>
		<div>
			<div v-for="item in list" class="koko">
				<img :src="`http://127.0.0.1:80/api/public/showimg/${item.pic}`" />
				<div class="koko3">
					<p>{{item.name}}</p>
					<br />
					<p style="font-size: 10px;">{{item.author}}</p>
					<p style="font-size: 10px;">{{item.maker}}</p>
					<br />
					<p style="font-size: 12px;">{{item.info}}</p>
					<p>￥{{item.price}}</p>
				</div>
				<div class="koko2">
					<el-button style="background-color: darkgray;" @click="goxq(item.id)">详情</el-button>
					<el-button style="background-color: darkorange;" @click="addsp(item.id)">购买</el-button>
				</div>
			</div>
			<el-pagination style="margin-left: 40%; margin-top: 30px;" :page-size="num" @current-change="change"
				:current-page="page" background layout="prev, pager, next" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import Head from '../default/pcHead.vue'
	import hhhh from '../model/allbook.vue'
	export default {
		name: 'HomeType',
		components: {
			hhhh,
			Head
		},

		data() {
			return {
				list2: [],
				list: [],
				page: 1,
				num: 5,
				total: 0,
				type: 0,
				bookname: '',
				book: {}
			}
		},
		methods: {
			gocar() {
				this.$router.push('/pcshopCar')
			},
			findbookname() {
				console.log(this.bookname);
				this.list = [];
				this.list2 = [];
				this.book = {
					key: this.bookname
				};
				this.$postkv('/api/public/book/findPageKey/1/3', this.book).then((resp) => {
					console.log('是否拿到参数');
					console.log(resp.data.data.books);
					this.list = resp.data.data.books;
					this.show();
					return this.list;
				})
			},
			addsp(id) {
				console.log(id);
				this.$get('/api/public/addCart/' + id).then((resp) => {
					console.log(resp.data.data);
					if (resp.data.data == 0) {
						this.$message.error('购买失败,当前未登录');
					}
				})
			},
			goxq(id) {
				console.log(id);
				this.$router.push({
					query: {
						ids: id
					},
					path: '/lookBook'
				})
			},
			goCar2() {
				this.$router.push('/pcshopCar');
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			go(item) {
				this.$route.query.arrs = [];
				console.log('获取数据');
				console.log(item);

				this.type = item.id;

				this.show2();
			},
			show() {
				this.list2 = [];
				this.$get('/api/public/type/findAll2').then((resp) => {

					console.log('2222222222');
					resp.data.data.forEach((item) => {
						if (item.prio < 10000) {
							this.list2.push(item)
						}
					})

					console.log(resp.data.data);
				});
				// this.$axios.get('http://127.0.0.1:80/api/public/findPageBook/1/5/0').then((resp) => {
				// 	// this.list2 = resp.data.data.books;
				// 	console.log(this.list2);
				// });

			},
			show2() {
				this.$axios.get('http://127.0.0.1:80/api/public/findPageBook/' + this.page + '/' + this.num + '/' + this
					.type).then((
					resp) => {
					this.list = resp.data.data.books;
					console.log(this.list);

					console.log(resp.data.data.total);
					this.total = resp.data.data.total;
				})
			},
			change(val) {
				console.log("页面更新数据值:" + val);
				this.page = val;
				this.show2();
			},
		},
		mounted() {
			console.log('打印数组');
			console.log(this.$route.query.arrs);

			console.log(this.$route.query.ids);
			if (this.$route.query.ids != null) {
				this.type = this.$route.query.ids;
			}
			if (this.$route.query.arrs != null) {
				this.list = [];
				// this.list = this.$route.query.arrs;
				this.$route.query.arrs.forEach((item) => {
					this.list.push(item);

				})
				console.log('搜索时候的数组');
				this.show();
				return this.list;
			}
			console.log(this.list);
			console.log('未搜索时候的数组');
			console.log(this.list);
			this.show();
			this.show2();

		},


	}
</script>

<style>
	.sb {
		width: 63%;
		margin: 0 auto;
	}

	.el-menu-item {
		width: 70%;
		/* background-color: aqua; */
		text-align: center;

	}

	.el-col.el-col-24 {
		width: 18%;
	}

	.koko {
		width: 100%;
		margin-left: 50%;
		margin-top: 1%;
		display: flex;
	}

	.koko img {
		width: 120px;
		height: 150px;
	}

	.koko2 {
		text-align: right;
	}

	.koko2 button {
		border: none;
		color: white;
	}

	.find {

		width: 60%;
		display: flex;
		margin: 0 auto;
		margin-top: 5%;

	}

	.find input {
		width: 100%;

	}

	.find button {
		/* margin-left: 20%; */
	}

	.koko3 {
		width: 100%;
	}
</style>